
<!DOCTYPE html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Title Page</title>

        <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js" ></script>
        <!-- Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        
        <div class="jumbotron">
            <div class="container text-center">
                <h1>express  music</h1>
                <p>test It now ...</p>
                
            </div>
        </div>
        
        

        <div class="container" id="musicApp">


            <ul class="list-group">
                <li class="list-group-item" v-for="(item, index) in fileList" :key="index">

                    <a :href="'/files/download?id=' + item "  target="_blank"> {{item}} </a>
                </li>
                <li class="list-group-item">Item 2</li>
                <li class="list-group-item">Item 3</li>
            </ul>


            <div class="row">
                <div class="col-md-4">
                    <img class="img img-responsive" src="song.png"/>
                    <h2> demo.mp4 </h2>

                    <a href="http://localhost:3003/music/play?id=demo.mp4" target="_blank"> <button class="btn btn-success"> Play </button>	</a> <hr>
                    <a href="http://localhost:3003/download?id=hello.mp3"  target="_blank"> <button class="btn btn-success"> Downnload </button> </a>
                </div>
                <div class="col-md-4">
                    <img class="img img-responsive" src="song.png"/>
                    <h2> 大悲咒.mp3 </h2>
                    <a href="http://localhost:3003/musics/toPlay?id=dbz.mp3" target="_blank"> <button class="btn btn-success"> Play </button>	</a> <hr>
                    <a href="http://localhost:3003/musics/download?id=dbz.mp3"  target="_blank"> <button class="btn btn-success"> Downnload </button> </a>
                </div>
                <div class="col-md-4">
                    <img class="img img-responsive" src="song.png"/>
                    <h2> beginning.mp3 </h2>
                    <a href="http://localhost:3003/music?id=beginning.mp3" target="_blank"> <button class="btn btn-success"> Play </button>	</a> <hr>
                    <a href="http://localhost:3003/download?id=beginning.mp3"  target="_blank"> <button class="btn btn-success"> Downnload </button> </a>
                </div>
            </div>
        </div>

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       
        
    </body>
</html>

<script>

    var vm = new Vue({
        el: '#musicApp',
        data: {
            fileList:[]
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            },
            all:function(){

                var _self = this;
                $.ajax({
                    type: "get",
                    url: "/musics",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        console.log(response);
                        if(response.code == 0){

                            _self.fileList = response.dat;
                        }

                    }
                });
            }
        },
        mounted:function () {

            this.all();
        }
    })


</script>